<template>
  <div class="screen-left" v-if="data">
    <div class="screen-left-dv0">{{ data.标题 }}</div>

    <div class="screen-left-dv1">
      <screen-block :title="data.左上.标题">
        <left-top :data="data.左上"/>
      </screen-block>
    </div>
    <div class="screen-left-dv2">
      <screen-block :title="data.左中.标题">
        <left-mid :data="data.左中"/>
      </screen-block>
    </div>
    <div class="screen-left-dv3">
      <screen-block title="data.左下.标题">
        <left-bottom :data="data.左下"/>
      </screen-block>
    </div>
  </div>
</template>
<script>
import screenBlock from './screen-block'

import leftTop from './left/left-top'
import leftMid from './left/left-mid'
import leftBottom from './left/left-bottom'

export default {
  name: 'screen-left',
  components: {
    screenBlock,
    leftTop,
    leftMid,
    leftBottom
  },
  props: {
    data: Object
  },
  data() {
    return {}
  },
  methods: {},
  mounted() {
  }
}
</script>
<style scoped lang="scss">
  .screen-left {
    width: 25%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &-dv0 {
      font-size: 24px;
      font-weight: bold;
    }
    &-dv1 {
      height: 27.6%;
    }

    &-dv2 {
      height: 42%;
    }

    &-dv3 {
      height: 21.4%;
    }
  }
</style>
